<ui:composition template="/template.xhtml" 
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="body">
        <h:form id="form-registration" class="form-horizontal">
            <p:panel id="panel-signup">
                <p:messages />
                <p:focus for="panel-signup"/>
                <div class="control-group">
                    <label class="control-label" for="txtLogin">Login</label>
                    <div class="controls">
                        <p:inputText id="txtLogin" value="#{customerManagedBean.customer.login}" 
                                 required="true" label="Login" 
                                 requiredMessage="Login requis">
                            <f:validateRequired for="txtLogin" />
                        </p:inputText>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="txtPassword">Password</label>
                    <div class="controls">
                        <p:inputText id="txtPassword" value="#{customerManagedBean.customer.password}" 
                                 required="true" label="password" 
                                 requiredMessage="Mot de passe requis">
                            <f:validateRequired for="txtPassword" />
                        </p:inputText>
                    </div>
                </div>
                <hr />
                <div class="control-group">
                    <label class="control-label" for="cmbCivility">Civilité</label>
                    <div class="controls">
                        <p:selectOneMenu id="cmbCivility" value="#{customerManagedBean.customer.civility}" 
                                         styleClass="span1" style="width: 60px; margin: 0;">  
                            <f:selectItem itemLabel="Mr" itemValue="Mr" />
                            <f:selectItem itemLabel="Mme" itemValue="Mme" />  
                            <f:selectItem itemLabel="Melle" itemValue="Melle" />
                        </p:selectOneMenu>
                    </div>
                </div><!-- Civilité -->
                <div class="control-group">
                    <label class="control-label" for="txtFirstName">Prénom</label>
                    <div class="controls">
                        <p:inputText id="txtFirstName" value="#{customerManagedBean.customer.firstName}" 
                                 required="true" label="FirstName" 
                                 requiredMessage="Prénom requis">
                            <f:validateRequired for="txtFirstName" />
                        </p:inputText>
                    </div>
                </div><!-- Prénom -->
                <div class="control-group">
                    <label class="control-label" for="txtLastName">Nom</label>
                    <div class="controls">
                        <p:inputText id="txtLastName" value="#{customerManagedBean.customer.lastName}" 
                                 required="true" label="LastName" 
                                 requiredMessage="Nom requis">
                            <f:validateRequired for="txtLastName" />
                        </p:inputText>
                    </div>
                </div><!-- Nom -->
                <div class="control-group addressFields">
                    <label class="control-label" for="txtAddress1">Adresse</label>
                    <div class="controls">
                        <p:inputText id="txtAddress1" value="#{customerManagedBean.customer.address1}" 
                                 required="true" label="Address1" 
                                 requiredMessage="Adresse requise">
                            <f:validateRequired for="txtAddress1" />
                        </p:inputText>
                    </div>
                </div><!-- Adresse 1 -->
                <div class="control-group addressFields">
                    <div class="controls">
                        <p:inputText id="txtAddress2" value="#{customerManagedBean.customer.address2}" />
                    </div>
                </div><!-- Adresse 2 -->
                <div class="control-group addressFields">
                    <div class="controls">
                        <p:inputText id="txtAddress3" value="#{customerManagedBean.customer.address3}" />
                    </div>
                </div><!-- Adresse 3 -->
                <div class="control-group zipCodeFields">
                    <label class="control-label" for="txtZipCode">Code Postal</label>
                    <div class="controls">
                        <p:inputText id="txtZipCode" value="#{customerManagedBean.customer.zipCode}" 
                                 required="true" label="txtZipCode" 
                                 requiredMessage="Code postal requis">
                            <f:validateRequired for="txtZipCode" />
                        </p:inputText>
                    </div>
                </div><!-- Code Postal -->
                <div class="control-group">
                    <label class="control-label" for="txtCity">Ville</label>
                    <div class="controls">
                        <p:inputText id="txtCity" value="#{customerManagedBean.customer.city}" 
                                 required="true" label="txtCity" 
                                 requiredMessage="Ville requise">
                            <f:validateRequired for="txtCity" />
                        </p:inputText>
                    </div>
                </div><!-- Ville -->
                <div class="control-group">
                    <label class="control-label" for="txtCountry">Pays</label>
                    <div class="controls">
                        <p:inputText id="txtCountry" value="#{customerManagedBean.customer.country}" 
                                 required="true" label="txtCountry" 
                                 requiredMessage="Pays requis">
                            <f:validateRequired for="txtCountry" />
                        </p:inputText>
                    </div>
                </div><!-- Ville -->
                <div class="control-group">
                    <label class="control-label" for="txtPhone">Téléphone</label>
                    <div class="controls">
                        <p:inputText id="txtPhone" value="#{customerManagedBean.customer.phone}" />
                    </div>
                </div><!-- Téléphone -->
                <div class="control-group">
                    <label class="control-label" for="txtMobile">Mobile</label>
                    <div class="controls">
                        <p:inputText id="txtMobile" value="#{customerManagedBean.customer.mobile}" 
                                 required="true" label="txtMobile" 
                                 requiredMessage="Mobile requis">
                            <f:validateRequired for="txtMobile" />
                        </p:inputText>
                    </div>
                </div><!-- Mobile -->
                <div class="control-group">
                    <label class="control-label" for="txtEmail">Email</label>
                    <div class="controls">
                        <p:inputText id="txtEmail" value="#{customerManagedBean.customer.email}" 
                                 required="true" label="txtEmail" 
                                 requiredMessage="Email requis">
                            <f:validateRequired for="txtEmail" />
                        </p:inputText>
                    </div>
                </div><!-- Email -->
                
                <div class="control-group">
                    <div class="controls">
                        <p:commandButton id="btnCancel" value="Annuler" 
                                 update="panel-signup" />
                        <p:commandButton id="btnSave" value="Enregistrer" 
                                 update="panel-signup"
                                 action="#{customerManagedBean.registerClickEvent}"/>
                    </div>
                </div>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>